<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<%@ include file="/WEB-INF/views/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eduProcess</title>
<link rel="stylesheet" type="text/css" href="/resources/css/web.css" />
<script src="/resources/js/jquery.min.js" type="text/javascript"></script>
<script src="/resources/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/resources/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(
		function(){
			var schoolApplicantValidator = $("#schoolApplicantForm ").validate({
				submitHandler: function(form) {
					$("#submitLine").hide();
					$("#indicatorLine").show();
					
					$(form).ajaxSubmit({
						type:"post",
						datatype:"json",
						url: "/json/signup",
						success: function(data){
							if(data.result){
								//alert('success');
								$("#signuparea").hide();
								$("#mobileverifyarea").show();
							}else{
								var errMsg = '';
								$.each(data.errors, function(key, value){
									errMsg += key+":"+value + "\n";
								});
								alert(errMsg);
								schoolApplicantValidator.showErrors(data.errors);
							}
						},
						error: function(){
							$("#submitLine").show();
							$("#indicatorLine").hide();
							alert("服务器处理异常");
						}
					});
				},
				rules:{
					"provinceId":{
						required:	true
					},
					"cityId":{
						required:	true
					},
					"regionId":{
						required:	true
					},
					"schoolName":{
						required:	true
					},
					"userName":{
						required:	true
					},
					"email": {
						required:	true,
						email:		true,
						remote:		"/json/signup/checkemail"
					},
					"mobile":{
						required:	true,
						minlength:	11,
						maxlength:	11
					},
					"phone":{
						required:	true
					},
					"verifyCode":{
						required:	true
					}
				},
				messages: {
					"provinceId":{
						required:	"请选择 省／直辖市"
					},
					"cityId":{
						required:	"请选择 地级市"
					},
					"regionId":{
						required:	"请选择 区／县"
					},
					"schoolName":{
						required:	"学校名称 必须填写"
					},
					"userName":{
						required:	"姓名 必须填写"
					},
					"email": {
						required:	"电子邮件 必须填写",
						email:		"请输入正确的电子邮件格式",
						remote:		""
					},
					"mobile":{
						required:	"手机号 必须填写",
						minlength:	"请输入11位手机号",
						maxlength:	"请输入11位手机号"
					},
					"phone":{
						required:	"办公电话 必须填写"
					},
					"verifyCode":{
						required:	"验证码 必须填写"
					}
				},
				errorElement: "div",
				errorPlacement: function(error, element) {
					error.appendTo(element.parent());
					error.addClass('errormsg');
				},
				
				onkeyup: false
			});
			
			var mobileVerifyValidator = $("#mobileVerifyForm").validate({
				submitHandler: function(form) {
					$("#submitLine2").hide();
					$("#indicatorLine2").show();
					
					$(form).ajaxSubmit({
						type:"post",
						datatype:"json",
						url: "/json/signup/mobileverify",
						success: function(data){
							if(data.result){
								alert("验证通过");
								window.location.replace("/help");
							}else{
								var errMsg = '';
								$.each(data.errors, function(key, value){
									errMsg += key+":"+value + "\n";
								});
								alert(errMsg);
								schoolApplicantValidator.showErrors(data.errors);
							}
						},
						error: function(){
							$("#submitLine2").show();
							$("#indicatorLine2").hide();
							alert("服务器处理异常，请重试！");
						}
					});
				},
				rules:{
					"verifyCode":{
						required:	true
					},
				},
				messages: {
					"verifyCode":{
						required:	"请输入验证码后再提交"
					},
				},
				errorElement: "div",
				errorPlacement: function(error, element) {
					error.appendTo(element.parent());
					error.addClass('errormsg');
				},
				
				onkeyup: false
			});
			
			
			var verifyCodeResendValidator = $("#verifyCodeResendForm").validate({
				submitHandler: function(form) {
					$("#submitLine3").hide();
					$("#indicatorLine3").show();
					
					$(form).ajaxSubmit({
						type:"post",
						datatype:"json",
						url: "/json/signup/resendverifycode",
						success: function(data){
							if(data.result){
								$("#mobileverifyarea").show();
								$("#verifyresendarea").hide();
								$("#operationResult").text("重新发送成功");
							}else{
								var errMsg = '';
								$.each(data.errors, function(key, value){
									errMsg += key+":"+value + "\n";
								});
								alert(errMsg);
								schoolApplicantValidator.showErrors(data.errors);
							}
						},
						error: function(){
							$("#submitLine3").show();
							$("#indicatorLine3").hide();
							alert("服务器处理异常，请重试！");
						}
					});
				},
				rules:{
					"verifyCode":{
						required:	true
					},
				},
				messages: {
					"verifyCode":{
						required:	"请输入验证码后再提交"
					},
				},
				errorElement: "div",
				errorPlacement: function(error, element) {
					error.appendTo(element.parent());
					error.addClass('errormsg');
				},
				
				onkeyup: false
			});
			
			var sendModifyEmailValidator = $("#sendModifyEmailForm").validate({
				submitHandler: function(form) {
					$("#submitLine4").hide();
					$("#indicatorLine4").show();
					
					$(form).ajaxSubmit({
						type:"post",
						datatype:"json",
						url: "/json/signup/sendmodifymobileemail",
						success: function(data){
							if(data.result){
								alert("发送成功，请登录邮箱进行确认");
								window.location.replace("/help");
							}else{
								var errMsg = '';
								$.each(data.errors, function(key, value){
									errMsg += key+":"+value + "\n";
								});
								alert(errMsg);
								schoolApplicantValidator.showErrors(data.errors);
							}
						},
						error: function(){
							$("#submitLine4").show();
							$("#indicatorLine4").hide();
							alert("服务器处理异常，请重试！");
						}
					});
				},
				rules:{
					"email": {
						required:	true,
						email:		true
					},
					"verifyCode":{
						required:	true
					}
				},
				messages: {
					"email": {
						required:	"电子邮件 必须填写",
						email:		"请输入正确的电子邮件格式"
					},
					"verifyCode":{
						required:	"请输入验证码后再提交"
					}
				},
				errorElement: "div",
				errorPlacement: function(error, element) {
					error.appendTo(element.parent());
					error.addClass('errormsg');
				},
				
				onkeyup: false
			});
			
			$("#provinceId").change(function(){
				var provinceId = $(this).children('option:selected').val();
				if(!provinceId){
					
					
				}else{
					$("#cityId").empty();
					$("#cityId").append("<option value=''>地级市</option>");
					$.ajax({
		    			type: 'POST',
						url: "/json/signup/listcity",
						data : { 
							"provinceId" : provinceId
						}, 
						success : function (r) {
							if(r.result){
								$.each(r.obj, function(i, city){
									$("#cityId").append("<option value='"+city.cityId+"'>"+city.cityName+"</option>");
								});
							}
						},
						error: function(xhr) {
							if(confirm("获取地级市失败")){
								$("#provinceId").change();
							}
						}
		    		});
				}
			});
			
			$("#cityId").change(function(){
				$("#regionId").empty();
				$("#regionId").append("<option value=''>区／县</option>");
				var cityId = $(this).children('option:selected').val();
				if(!cityId){
					
				}else{
					$.ajax({
		    			type: 'POST',
						url: "/json/signup/listregion",
						data : { 
							"cityId" : cityId
						}, 
						success : function (r) {
							if(r.result){
								$.each(r.obj, function(i, region){
									$("#regionId").append("<option value='"+region.regionId+"'>"+region.regionName+"</option>");
								});
							}
						},
						error: function(xhr) {
							if(confirm("获取 区／县 失败")){
								$("#cityId").change();
							}
						}
		    		});
				}
			});
			
			$("#btnResendVerifycode").click(function(event){
				$("#mobileverifyarea").hide();
				$("#verifyresendarea").show();
				$("#resendVerification").attr("src", "/verification?random=" + event.timeStamp);
			});
			
			$("#cancelResend").click(function(){
				$("#mobileverifyarea").show();
				$("#verifyresendarea").hide();
			});
			
			$("#btnModifyMobile").click(function(event){
				$("#mobileverifyarea").hide();
				$("#sendmodifyemailarea").show();
				$("#modifyVerification").attr("src", "/verification?random=" + event.timeStamp);
			});
			
			$("#cancelModify").click(function(){
				$("#mobileverifyarea").show();
				$("#sendmodifyemailarea").hide();
			});
			
			$("#refreshResendVerification").click(function(event){
				$("#resendVerification").attr("src", "/verification?random=" + event.timeStamp);
			});
			
			$("#refreshSignupVerification").click(function(event){
				$("#signupVerification").attr("src", "/verification?random=" + event.timeStamp);
			});
			
			$("#refreshModifyVerification").click(function(event){
				$("#modifyVerification").attr("src", "/verification?random=" + event.timeStamp);
			});
		}
	);
</script>
</head>
<body>
<div class="tmenu">
	<div class="tm_logo">
		<ul>
			<li class="menuli">
				<a href="#" class="tm_logo_txt">学校管理账号</a>
			</li>
		</ul>
	</div>
	<div class="tm_pro">
		<ul>
			<li>
				<a href="/login" class="tm_pro_name">登录</a>
			</li>
		</ul>
	</div>
</div>
<div class="content" style="min-height:300px;padding-left:40px;margin-bottom:50px;">
	<div id="signuparea">
		<div style="padding-top:20px;padding-bottom:20px;">
			如果贵校已经有管理账号，不需要重复申请，直接通过管理账号可以增加多个管理人员。
		</div>
		<form id="schoolApplicantForm" name="schoolApplicantForm" method="post">
		<div>
			<p style="font-size:90%;font-weight:bold;">您的联系信息？</p>
			<div>
				<div class="fieldtitle"><label>学校所在地</label></div>
				<div>
					<select id="provinceId" name="provinceId">
						<option value="">省／直辖市</option>
						<c:forEach items="${provinces}" var="province"><option value="${province.provinceId}">${province.provinceName}</option></c:forEach>
					</select>
					<select id="cityId" name="cityId">
						<option value="">地级市</option>
					</select>
					<select id="regionId" name="regionId">
						<option value="">区／县</option>
					</select>
				</div>
				<div class="fieldtitle"><label>学校名称</label></div>
				<div><input type="text" id="schoolName" name="schoolName" value="" maxlength="128"/></div>
				<div class="fieldtitle"><label>学校网址</label></div>
				<div><input type="text" id="schoolWebsite" name="schoolWebsite" value="" maxlength="128"/></div>
				<div class="fieldtitle"><label>姓名</label></div>
				<div><input type="text" id="userName" name="userName" value="" maxlength="32"/></div>
				<div class="fieldtitle"><label for="gender">性别</label></div>
				<div>
					<select id="gender" name="gender">
						<option>请选择</option>
						<option value="M">男</option>
						<option value="F">女</option>
					</select>
				</div>
				<div class="fieldtitle"><label>电子邮件(登录ID)</label></div>
				<div><input type="email" id="email" name="email" value="" maxlength="128"/></div>
				<div class="fieldmemo">提交注册后，系统会自动发送验证邮件到该邮箱，请及时确认</div>
				
				<div class="fieldtitle"><label>手机号</label></div>
				<div><input type="tel" id="mobile" name="mobile" value="" maxlength="11"/></div>
				<div class="fieldmemo">提交注册后，会发送验证码到该手机号进行验证</div>
				
				<div class="fieldtitle"><label>办公电话(区号#电话#分机)</label></div>
				<div><input type="tel" id="phone" name="phone" value="" maxlength="32"/></div>
				<div class="fieldmemo">请与学校电话保持一致</div>
				<div class="fieldtitle"><label>验证码</label> <a href="javascript:void(0)" id="refreshSignupVerification"><span style="font-size:90%">[点击获取新的字符]</span></a></div>
				<div><input type="text" id="verifyCode" name="verifyCode" value=""/></div>
				<div>
					<img src="/verification" id="signupVerification"/>
				</div>
				<p style="font-size:90%;font-weight:bold;padding-top:10px;padding-bottom:10px;">单击 “接受”，即表示您同意 <a href="#">eduProcess服务条款</a> 以及 <a href="#">隐私声明</a></p>
				<div id="submitLine"><input type="submit" value="接受" /></div>
				<div id="indicatorLine" style="display:none;"><img src="/resources/image/progressindicator.gif" align="absmiddle"/> 提交中...</div>
			</div>
		</div>
		</form>
	</div>
	<div id="mobileverifyarea" style="display:none;">
		<div style="padding-top:20px;padding-bottom:20px;line-height:150%;">
			<p style="color:#cc6600;" id="operationResult">注册成功</p>
			请输入获得的手机验证码进行验证，客服会尽快与您联系。
		</div>
		<form id="mobileVerifyForm" name="mobileVerifyForm" method="post">
		<div>
			<div class="fieldtitle"><label>手机验证码</label></div>
			<div style="padding-bottom:10px;"><input type="tel" name="verifyCode" value="" maxlength="8"/></div>
			<div id="submitLine2"><input type="submit" value="确认" /></div>
			<div id="indicatorLine2" style="display:none;"><img src="/resources/image/progressindicator.gif" align="absmiddle"/> 提交中...</div>
			<p style="font-size:90%;font-weight:bold;padding-top:10px;padding-bottom:10px;line-height:150%;">
				未接收到验证码？<br/>
				<a href="javascript:void(0);" id="btnResendVerifycode">点击重新发送</a><br/>
				<a href="javascript:void(0);" id="btnModifyMobile">修改注册手机号</a>
			</p>
			<input type="hidden" id="mobileVerifyId" name="mobileVerifyId" value=""/>
			<input type="hidden" id="verifyType" name="verifyType" value="SIGN"/>
			<input type="hidden" id="businessId" name="businessId" value=""/>
		</div>
		</form>
	</div>
	
	<div id="verifyresendarea" style="display:none;">
		<div style="padding-top:20px;padding-bottom:20px;line-height:150%;">
			同一手机号每天最多发送5条验证短信，如果确实未收到，请与客服联系。
		</div>
		<form id="verifyCodeResendForm" name="verifyCodeResendForm" method="post">
		<div>
			<p style="font-size:90%;font-weight:bold;">重新发送验证码</p>
			<div class="fieldtitle"><label>手机号</label></div>
			<div style="padding-bottom:10px;"><input type="tel" name="mobile" value="135****3693" readonly/></div>
			<div class="fieldtitle"><label>验证码</label> <a href="javascript:void(0);" id="refreshResendVerification"><span style="font-size:90%">[点击获取新的字符]</span></a></div>
			<div><input type="text" name="verifyCode" value=""/></div>
			<div>
				<img src="/verification" id="resendVerification"/>
			</div>
			<div id="submitLine3">
				<input type="submit" value="重新发送手机验证码" />
				<input type="button" value="取消" id="cancelResend"/>
			</div>
			<div id="indicatorLine3" style="display:none;"><img src="/resources/image/progressindicator.gif" align="absmiddle"/> 发送中...</div>
			<input type="hidden" id="verifyType" name="verifyType" value="SIGN"/>
			<input type="hidden" id="businessId" name="businessId" value=""/>
		</div>
		</form>
	</div>
	
	<div id="sendmodifyemailarea" style="display:none;">
		<div style="padding-top:20px;padding-bottom:20px;line-height:150%;">
			请输入您注册时的电子邮件，系统会发送修改手机号的连接到您的信箱，点击连接进入修改页面进行修改。
		</div>
		<form id="sendModifyEmailForm" name="sendModifyEmailForm" method="post">
		<div>
			<p style="font-size:90%;font-weight:bold;">发送修改手机号的连接</p>
			<div class="fieldtitle"><label>电子邮件</label></div>
			<div style="padding-bottom:10px;"><input type="email" name="email" value="" maxlength="128"/></div>
			<div class="fieldtitle"><label>验证码</label> <a href="javascript:void(0);" id="refreshModifyVerification"><span style="font-size:90%">[点击获取新的字符]</span></a></div>
			<div><input type="text" name="verifyCode" value=""/></div>
			<div>
				<img src="/verification" id="modifyVerification"/>
			</div>
			<div id="submitLine4">
				<input type="submit" value="发送修改连接" />
				<input type="button" value="取消" id="cancelModify"/>
			</div>
			<div id="indicatorLine4" style="display:none;"><img src="/resources/image/progressindicator.gif" align="absmiddle"/> 发送中...</div>
		</div>
		</form>
	</div>
</div>
<div style="padding-top:0!important;bottom:0;right:0px;width:100%;margin-top:-31px;max-height:31px;border-top:1px solid #ccc;font-size:80%;">
<ul style="padding-left:20px;">
	<li class="foot_copy_li"><span class="foot_span">&copy; 2013 eduProcess</span></li>
	<li class="foot_li"><span class="foot_span">使用帮助</span></li>
	<li class="foot_li"><span class="foot_span">服务条款</span></li>
	<li class="foot_li"><span class="foot_span">隐私声明</span></li>
</ul>
</div>
</body>
</html>